<template>
<onekit-page>
<onekit-view onekit-class="container">
	<div is="onekit-template-head" :DATA="`${JSON.stringify({title:'picker'})}`"></div>
	<onekit-view onekit-class="page-body">
		<onekit-view onekit-class="page-section">
			<onekit-view onekit-class="weui-cells__title">地区选择器</onekit-view>
			<onekit-view onekit-class="weui-cells weui-cells_after-title">
				<onekit-view onekit-class="weui-cell weui-cell_input">
					<onekit-view onekit-class="weui-cell__hd">
						<onekit-view onekit-class="weui-label">当前选择</onekit-view>
					</onekit-view>
					<onekit-view onekit-class="weui-cell__bd">
						<onekit-picker :value="index" :range="array" @Change="bindPickerChange">
							<onekit-view onekit-class="weui-input">{{array[index]}}</onekit-view>
						</onekit-picker>
					</onekit-view>
				</onekit-view>
			</onekit-view>
			<onekit-view onekit-class="weui-cells__title">时间选择器</onekit-view>
			<onekit-view onekit-class="weui-cells weui-cells_after-title">
				<onekit-view onekit-class="weui-cell weui-cell_input">
					<onekit-view onekit-class="weui-cell__hd">
						<onekit-view onekit-class="weui-label">当前选择</onekit-view>
					</onekit-view>
					<onekit-view onekit-class="weui-cell__bd">
						<onekit-picker mode="time" :value="time" start="09:01" end="21:01" @Change="bindTimeChange">
							<onekit-view onekit-class="weui-input">{{time}}</onekit-view>
						</onekit-picker>
					</onekit-view>
				</onekit-view>
			</onekit-view>
			<onekit-view onekit-class="weui-cells__title">日期选择器</onekit-view>
			<onekit-view onekit-class="weui-cells weui-cells_after-title">
				<onekit-view onekit-class="weui-cell weui-cell_input">
					<onekit-view onekit-class="weui-cell__hd">
						<onekit-view onekit-class="weui-label">当前选择</onekit-view>
					</onekit-view>
					<onekit-view onekit-class="weui-cell__bd">
						<onekit-picker mode="date" :value="date" start="2015-09-01" end="2017-09-01" @Change="bindDateChange">
							<onekit-view onekit-class="weui-input">{{date}}</onekit-view>
						</onekit-picker>
					</onekit-view>
				</onekit-view>
			</onekit-view>
		</onekit-view>
	</onekit-view>
	<div is="onekit-template-foot"></div>
</onekit-view>
</onekit-page></template>
<script>
/* eslint-disable */
import Vue from 'vue';
import onekit_template_0 from '../../../../page/common/head.head.vue';Vue.component('onekit-template-head',onekit_template_0);
import onekit_template_1 from '../../../../page/common/foot.foot.vue';Vue.component('onekit-template-foot',onekit_template_1);
const ONEKIT_JSON= {
  "navigationBarTitleText": "picker",
  "usingComponents": {
    
  }
};
const ONEKIT_SJS = {
};
import wx from '../../../../../weixin2vue/wx.js';
import Macro from '../../../../../weixin2vue/Macro.js';
const {getApp,getCurrentPages} = Macro;
import Page from '../../../../../weixin2vue/OnekitPage.js';
import Component from '../../../../../weixin2vue/OnekitComponent.js';
export default Page(ONEKIT_JSON,["index","array","time","date"],ONEKIT_SJS,{
    "onShareAppMessage"(){
      return {
        "title":'picker',
        "path":'page/component/pages/picker/picker'
};
    },
    "data":{
        "array":[
          '中国',
          '美国',
          '巴西',
          '日本'
        ],
        "index":0,
        "date":'2016-09-01',
        "time":'12:01'
},
    "bindPickerChange"(e){
      console.log('picker发送选择改变，携带值为',e.detail.value);
      this.setData({
        "index":e.detail.value
});
    },
    "bindDateChange"(e){
      this.setData({
        "date":e.detail.value
});
    },
    "bindTimeChange"(e){
      this.setData({
        "time":e.detail.value
});
    }
});

</script>
<style 
 lang="css">
@import '/page/common/lib/weui.css';
.picker {
  padding: 10px 13px ;
  background-color: #FFFFFF ;
}
</style>